<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环用法</title>
		</style>
	</head>
	<body>
		<!-- vue中的循环 v-for
						1.循环获取数据的内容
						2.可以循环复制标签
						参数说明:
							item: 变量名称  名称任意
							in:	  关键字   固定写法
							array: 要遍历的数据
					 -->
		<div id="app">
		<!--vue中的循环  -->
		<h1 v-for="item in array">{{item}}</h1>
		
		<hr />
		<!-- v-for语法: 获取数据/下标 -->
		<h1 v-for="(item,index) in array">{{item}}——{{index}}</h1>
		
		<hr />
		<!-- 循环遍历集合 -->
		<div v-for="item in userList">
			<p>ID名: {{item.id}}</p>
			<p>name名: {{item.name}}</p>
		</div>
		
		<hr />
		
		<!-- 如果直接遍历对象,则输出的value值 
						参数说明:  1.value 对象的值   2.对象的key  3.数据的下标
					-->
		<div v-for="(value,key,index) in user">
		{{key}}——{{value}}——{{index}}</div>
		
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//数组
						array: ["安琪拉","孙悟空","诸葛亮"],
						userList: [{
							id: 100,
							name: "鲁班七号"
						},{
							id: 200,
							name: "凯"
						},{
							id: 300,
							name: "瑶"
						}],
						//定义对象
						user: {
							id: 200,
							name: "牛",
							age: 10
						}
				},
				//key:value 格式
				methods: {
						
						
					}
			})
		</script>
	</body>
</html>
